<script setup lang="ts">
import { mainStore } from './../store/index' // 导入
import { storeToRefs } from 'pinia'

defineProps<{ msg: string }>()

/**
 * 下面两种方式都是可以读取到 store 中的值，改变的时候，都是一起变化的
 */
const store = mainStore();  // 创建对象

let { count, sumPrice } = storeToRefs(store); // 将对象解构，并且设置为响应式

// store state 的第一种写法
function addStoreCount() {
  // store.increment();
  ++count.value;
  store.list.push({
    name: "显示器",
    id: "008",
    price: 400
  });
}

// store state 的第二种写法
function patchAdd() {
  store.$patch({
    count: ++store.count,
    list: [{id: "008",name: "显示器",  price: 400}]
  });
}

// store state 的第三种写法
function patchState(){
  store.$patch( state => {
    state.count += 10;
    state.list.push({
      id: "008",name: "显示器",  price: 400
    });
  });
}


// 替换整个 state 的值
function replaceState(){
  store.$state = {
    count: 100,
    list: [
      {id: "009",name: "显示器",  price: 400},
    ]
  };
}

// 重置 store 中的值
function reset(){
  store.$reset();
}


// 监听整个仓库变化

</script>

<template>
  <h1>{{ msg }}</h1>

  <div class="card">
    <!--  界面展示 -->
    <p>读取 mainStore 中的值: {{ store.count }}</p>

    <!-- 响应式解构读取 -->
    <p>读取 mainStore 中的值: {{ count }}</p>

    <!-- 读取 mainStore 中的 getters -->
    <p>读取 mainStore 中的 getters : {{ store.sumPrice }}</p>
    <p>读取 mainStore 中的 getters : {{ sumPrice }}</p>

    <div>
      <p>明细中的值为：</p>
      <ul>
        <li v-for="list of store.list"> {{ list.id }} -- {{ list.name }} -- {{ list.price }}</li>
      </ul>
    </div>
  </div>

  <div class="card">
    <button @click="addStoreCount()">store action 增加</button>
    <button @click="patchAdd()">$patch 增加</button>
    <button @click="patchState()">$patchState 增加</button>
    <button @click="replaceState()">整个替换</button>
    <button @click="reset()">重置</button>
  </div>
</template>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
